<template>

    <div class="dashboard-container">
        <div id="container">
            <el-form :inline="true" style="margin-left: 15px;">
                <el-form-item><el-input v-model="tableData.goods" placeholder="请输入商品"></el-input></el-form-item>
                <el-form-item> <el-select v-model="tableData.category" class="size" placeholder="请选择分类" prop="category"  style="width: 200px">
                    <el-option 
                    v-for="wh in categories" 
                    :key="wh.id" 
                    :label="wh.category" 
                    :value="wh.category">
                    </el-option>
                </el-select></el-form-item>
                <el-button type="primary" @click="pageQuery()" icon="el-icon-search"
                    v-loading.fullscreen.lock="fullscreenLoading">查询</el-button>
                <el-button type="primary" icon="el-icon-close" @click="reset()">重置</el-button>
                <el-button disabled icon="el-icon-close">自动清理</el-button>

            </el-form>
        </div>

        <el-table :data="tableData" border style="width: 100%; margin-left: 15px;" align="center">
            <el-table-column prop="id" label="ID" width="100">
            </el-table-column>
            <el-table-column prop="goods" label="商品" width="170" align="center" type="primary">

            </el-table-column>
            <el-table-column prop="storehouse" label="仓库" width="170" align="center">
            </el-table-column>
            <el-table-column prop="category" label="分类名称" width="170" align="center"></el-table-column>
            <el-table-column prop="account" label="账号" width="170" align="center"></el-table-column>
            <el-table-column prop="role" label="权限" width="170" align="center"></el-table-column>
             <el-table-column prop="time" label="时间" width="170" align="center"></el-table-column>
              <el-table-column prop="status" label="状态" width="170" align="center"></el-table-column>
            <el-table-column prop="quantity" label="数量" width="170" align="center">
            </el-table-column>
             
        </el-table>

        <el-pagination align="center" @size-change="handleSizeChange" @current-change="handleCurrentChange"
            :current-page="page" :background="background" :page-sizes="[5, 10, 15, 20]" :page-size="pageSize"
            layout="total, sizes, prev, pager, next, jumper" :total="totalCount">
        </el-pagination>
                </div>
</template>

<script>
import { page} from '@/api/Recording'
import {getByCategory} from '@/api/GoodsCategory';

export default {
    data() {
        return {
            id: null,
            goods: null,
            storehouse: null,
            category: null,
            account: null,
            role: null,
            quantity: null,
            page: 1,
            pageSize: 10,
            tableData: [],
            total: 0,
            categories: [],
        }
    },

    //服务启动后自动执行分页查询
    created() {
        this.pageQuery();
        this.loadCategories();
    },

    methods: {
        //分页查询
        pageQuery() {
            const params = {
                id: null,
                goods: this.tableData.goods || null,
                storehouse: this.tableData.storehouse || null,
                category:this.tableData.category || null,
                account: null,
                role: null,
                time:null,
                status:null,
                quantity: null,
                page: this.page,
                pageSize: this.pageSize
            }
            page(params).then(res => {
                this.total = res.data.data.total
                this.tableData = res.data.data.records
            })
        },

        //重置
        reset() {
            this.goods = ''
            this.category = ''
            this.pageQuery();
        },

        //查询
        sel(id) {
            sel(id).then(res => {
                this.form = res.data.data;
            })
        },

        loadCategories() {
           getByCategory().then(response => {
                    if (response.data.code === 200) {
                        this.categories = response.data.data; // 保存分类数据
                    } else {
                        this.$message.error('加载分类失败');
                    }
                })
               .catch(error => {
                   console.error(error);
                   this.$message.error('服务端错误');
                    });
            },
        handleSizeChange(val) {
            this.pageSize = val
            this.pageQuery()
        },
        handleCurrentChange(val) {
            this.page = val
            this.pageQuery()
        },
        // 监控多选框事件
        handleSelectionChange(selection) {
            this.selectNum = selection.length;
            this.selection = selection;
        },

    }
}


</script>

<style scoped>
.size {
    height: 100%;
    width: 35%;
}

.UserSize {
    height: 700px;
    width: 1900px;
}
</style>